<template>
  <view class="all1">
    <view class="input">
      <view style="display: flex; align-items: center;margin-bottom: 30rpx;">
<!--        <view class="">搜索内容：</view>-->
<!--        <u&#45;&#45;input placeholder="请输入内容" border="surround" v-model="value"></u&#45;&#45;input>-->
<!--        <u-button type="primary" icon="search" text="搜索" style="width: 200rpx;" @click="onQuery"></u-button>-->
        <input type="text" v-model="searchContent" style="border:1px solid #ccc;font-size:smaller;border-radius:10rpx;width: 79%;" @input="inputFun2">
        <u-button icon="reload" text="刷新"
                  style="width: 120rpx;height: 68rpx; border-radius: 68rpx; margin-left: 10rpx;"
                  @click="presa"></u-button>
      </view>
      <div v-for="(item,index) in optionsData" @click="getOptionInfo(item,item.seller)" v-show="isshow"
           style="border:1px solid #ccc;ine-height:30px;cursor: pointer;border-radius:10rpx">
        {{item.createTime }}&nbsp&nbsp{{item.buyer}}&nbsp{{item.amount}}&nbsp{{item.isPay}}
      </div>
<!--      <view style="display: flex;margin: 30rpx -150rpx;">-->
<!--        <u-button type="primary" icon="plus" text="批量添加" style="width: 200rpx;" @click="insert"></u-button>-->
<!--        <u-button type="primary" text="刷新" style="width: 200rpx;" @click="presa"></u-button>-->
<!--      </view>-->
      <uni-drawer ref="showLeft" mode="left" :width="320">
        <view class="close">
          <button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭</text></button>
          <view class="formlist">
            <u-form :model="fromupdate" :rules="rules" ref="uForm" label-width="80" labelAlign="left">
              <u-form-item prop="traner" borderBottom ref="item1">
                <view class="lable">买家</view>
                <u--input v-model="fromupdate.seller" border="none" placeholder="请填写买家"></u--input>
              </u-form-item>
              <!--						<u-form-item prop="model" borderBottom ref="item1">-->
              <!--							<view class="lable">类型</view>-->
              <!--							<u&#45;&#45;input v-model="fromupdate.model" border="none" placeholder="请填写类型"></u&#45;&#45;input>-->
              <!--						</u-form-item>-->
              <!--						<u-form-item prop="number" borderBottom ref="item1">-->
              <!--							<view class="lable">数量</view>-->
              <!--							<u&#45;&#45;input v-model="fromupdate.number" border="none" placeholder="请填写数量"></u&#45;&#45;input>-->
              <!--						</u-form-item>-->
              <!--						<u-form-item prop="unitPrice" borderBottom ref="item1">-->
              <!--							<view class="lable">单价</view>-->
              <!--							<u&#45;&#45;input v-model="fromupdate.unitPrice" border="none" placeholder="请填写单价"></u&#45;&#45;input>-->
              <!--						</u-form-item>-->
              <u-form-item prop="paymentMethod" borderBottom ref="item1">
                <view class="lable">金额</view>
                <u--input v-model="fromupdate.amount" border="none" placeholder="请填写金额"></u--input>
              </u-form-item>
              <u-form-item prop="paymentMethod" borderBottom ref="item1">
                <view class="lable">支付方式</view>
                <u--input v-model="fromupdate.paymentMethod" border="none" placeholder="请填写支付方式"></u--input>
              </u-form-item>
              <u-form-item prop="paymentMethod" borderBottom ref="item1">
                <view class="lable">是否支付</view>
                <u--input v-model="fromupdate.isPay" border="none" placeholder="请填写是否支付"></u--input>
              </u-form-item>
              <view class="uni-btn-v" @click="submit">确认修改</view>
            </u-form>
            <!--					</u-action-sheet>-->
          </view>
        </view>
      </uni-drawer>
      <view class="uni-container">
        <view class="list" v-for="(item,index) in tableData" :key="index" @click="infor(item)">
          <view class="l-i">
						<span class="spanli">
							<view class="li"></view>
							<view>买家</view>
						</span>：<span style="font-weight: bold;">{{item.buyer}}</span>
          </view>
          <view class="l-i"><span class="spanli">
							<view class="li"></view>
							<view>金额</view>
						</span>：<span style="color:#F9363A;font-weight: bold;">{{item.amount}}</span>元</view>
          <view style="display: flex; justify-content: space-between;">
            <view class="l-i"><span class="spanli">
								<view class="li"></view>
								<view>日期</view>
							</span>：{{item.createTime}}</view>
          </view>
          <view class="l-i"><span class="spanli">
							<view class="li"></view>
							<view>是否支付</view>
						</span>：{{item.isPay}}</view>
        </view>
        <view class="uni-pagination-box">
          <uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
                          @change="change" />
        </view>
      </view>
    </view>
    <view class="btn">
      <u-button type="primary" icon="plus" text="批量添加" style="width: 90%;
				margin-top: 20rpx;
				border-radius: 80rpx;
				background-color: red;
				border: none;
			}" @click="insert"></u-button>
    </view>
  </view>
</template>


<script>
import {
  Salequeryall,
  Salelikeall,
  Saleupdate,
  Saledelete
} from '@/common/api.js'
export default {
  data() {
    return {
      isshow:false,
      searchContent:"",
      optionsData:[],
      options2:[],
      options3:[],
      orstate: '2',
      value: '',
      //抽屉
      showLeft: false,
      searchVal: '',
      fromData: {
        companyId: ''
      },
      from: {
        companyId: "",
        like: ""
      },
      fromAddall: [],
      fromupdate: {},
      fromAdd: {
        traner: "", //买家
        model: "", //类型
        number: "", //数量
        unitPrice: "", //单价
        paymentMethod: "", //支付方式
        orstate: "", //添加类型//1为进货2为销货
        isPay: "", //是否支付
        companyId: "" //所属公司
      },
      itemlist:[],
      tableData: '',
      // 每页数据量
      pageSize: 10,
      // 当前页
      pageCurrent: 1,
      // 数据总量
      total: 0,
      loading: false
    }
  },
  onLoad() {
    this.getData()
  },
  // onshow() {
  //   this.getData()
  // },
  methods: {
    inputFun2(){
      this.isshow=true
    },
    getOptionInfo(val,searchName){
      this.isshow=false
      this.searchContent=searchName
      this.options3[0]=val;
      this.tableData=this.options3;
    },
    presa() {
      this.getData()
    },
    onQuery() {
      console.log(this.value);
      this.from.companyId = uni.getStorageSync('companyId');
      this.from.like = this.value;
      uni.showLoading({
        title: '加载中...',
      });
      Salelikeall(this.from).then((res) => {
        uni.hideLoading()
        console.log('---------------------');
        console.log(res);
        this.tableData = res.data
      })
    },
    submit() {
      this.fromupdate.companyId = uni.getStorageSync('companyId');
      uni.showLoading({
        title: '加载中...',
      });
      Saleupdate(this.fromupdate).then((res) => {
        uni.hideLoading();
        this.getData()
      })
    },
    infor(item) {
      console.log('详情');
      uni.navigateTo({
        url: '/pages/Functions/information?orstate=2&id='+item.id
      })
    },
    deleteOne(item) {
      console.log('删除');
      console.log(item);
      this.itemlist[0] = item.id;
      let from = {}
      from.idList = this.itemlist;
      from.traner = item.buyer;
      from.companyId = item.companyId;
      uni.showLoading({
        title: '加载中...',
      });
      Saledelete(from).then((res) => {
        uni.hideLoading();
        this.getData()
      })
    },
    insert() {
      uni.navigateTo({
        url: '/pages/Functions/insert?orstate=2'
      })
    },
    confirm() {},
    // 打开窗口
    showDrawer(item,e) {
      this.$refs[e].open()
      this.fromupdate = item;
    },
    // 关闭窗口
    closeDrawer(e) {
      this.$refs[e].close()
    },
    // 抽屉状态发生变化触发
    // change(e, type) {
    //   console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
    //   this[type] = e
    // },
    // //输入搜索内容
    // change(e) {
    //   console.log('change', e);
    // },
    // 分页触发
    change(e) {
      this.$refs.table.clearSelection()
      this.selectedIndexs.length = 0
      this.getData(e.current)
    },
    // 搜索
    search() {
      this.getData(1, this.searchVal)
    },
    // 获取数据
    getData() {
      this.loading = true
      this.fromData.companyId = uni.getStorageSync('companyId');
      console.log(this.fromData);
      uni.showLoading({
        title: '加载中...',
      });
      Salequeryall(this.fromData).then((res) => {
        uni.hideLoading();
        console.log(res.data);
        this.loading = false;
        this.tableData = res.data
        this.options2 = res.data
      })
    },

  },
  onNavigationBarButtonTap(e) {
    if (this.showLeft) {
      this.$refs.showLeft.close()
    } else {
      this.$refs.showLeft.open()
    }
  },
  // app端拦截返回事件 ，仅app端生效
  onBackPress() {
    if (this.showRight || this.showLeft) {
      this.$refs.showLeft.close()
      this.$refs.showRight.close()
      return true
    }
  },
  watch: {
    searchContent() {
      var ipt_content = this.searchContent
      if (ipt_content) {
        var item = this.options2.filter(ele => {
          console.log(ele)
          console.log(ele.seller)
          if (ele.model.match(ipt_content) || ele.isPay.match(ipt_content) || ele.amount.match(ipt_content) || ele.buyer.match(ipt_content) || ele.createTime.match(ipt_content)) {
            // console.log(ele.text.match(ipt_content))
            return ele;
          }
        })
        this.optionsData = item
      }
      console.log(this.optionsData)
    }
  }
}
</script>


<style>
.uni-group {
  display: flex;
  align-items: center;
}

.all1 {
  width: 750rpx;
  background-color: #F5F4F4;
  height: 100vh;
  overflow: auto;
}

.input {
  padding: 30rpx;
}

.formlist {
  /* margin: 420rpx 30rpx 0 30rpx; */
  /* background-color: white; */
  padding: 30rpx;
  border-radius: 30rpx;
}

.lable {
  font-size: 30rpx;
  font-weight: bold;
}

.uni-btn-v {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #24d4b0;
  color: #fff;
  font-size: 35rpx;
  font-weight: bold;
  border-radius: 30rpx;
  text-align: center;
  margin-top: 30rpx;
}
.list {
  border-radius: 30rpx;
  box-sizing: border-box;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: white;

}
.spanli {
  color: #046BFB;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.l-i {
  display: flex;
  margin-bottom: 10rpx;
}


.li {
  width: 15rpx;
  height: 15rpx;
  border: 4rpx solid #046BFB;
  border-radius: 50%;
  margin-right: 10rpx;
}
.btn {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 1024;
  box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
  height: 140rpx;
}
</style>
